<template>
	<view class="dinner-page">
		<!-- 搜索区域 -->
		<view class="search-container">
			<uni-icons type="search" size="28" color="#ff7a45" class="search-icon" />
			<input v-model="searchKeyword" type="text" placeholder="搜索美食、主题或来源" class="search-input"
				@confirm="handleSearch" />
			<button @click="handleSearch" class="search-btn">搜索</button>
		</view>

		<!-- 列表区域 -->
		<view class="dinner-list">
			<!-- 列表项 -->
			<view v-for="(dinner, index) in filteredList" :key="dinner.id" class="dinner-item">
				<text class="dinner-title">{{ dinner.title }}</text>
				<text class="dinner-desc">{{ dinner.summary }}</text>
				<view class="dinner-info">
					<text class="info-source">{{ dinner.source }}</text>
					<text class="info-date">{{ dinner.publishDate }}</text>
				</view>
				<navigator :url="`/pages/enter/dinner/dinnerDetail?id=${dinner.id}`" class="detail-link">
					查看详情 <uni-icons type="arrow-right" size="20" color="#fff" />
				</navigator>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredList.length === 0 && searchKeyword.trim()">
				<uni-icons type="empty" size="60" color="#ccc" />
				<text class="empty-text">未找到相关美食内容</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				// 精简摘要后的美食推荐列表，突出核心卖点
				dinnerList: [{
						id: 1,
						title: "【时令爆款】鲜蔬田园风味套餐，初夏清爽首选",
						summary: "云南高山当季鲜蔬直供，低油低盐无添加，脆嫩多汁，春夏减脂必吃。",
						source: "美食风尚周报",
						publishDate: "2025-05-01"
					},
					{
						id: 2,
						title: "【非遗焕新】百年东坡肉创新套餐，老字号出圈之作",
						summary: "非遗技艺+米其林升级，金华两头乌猪肉慢炖8小时，软糯不腻。",
						source: "饮食文化研究院",
						publishDate: "2025-05-02"
					},
					{
						id: 3,
						title: "【网红打卡】海南椰子鸡套餐，复刻热带海岛风味",
						summary: "文昌鸡+现摘椰子纯汤底，无添加剂，在家体验三亚海边风味。",
						source: "文旅美食探索官",
						publishDate: "2025-05-03"
					},
					{
						id: 4,
						title: "【家常暖心】手工现包饺子套餐，复刻妈妈的味道",
						summary: "纯手工擀皮现包，新鲜食材无添加，一口尝出家的温暖。",
						source: "生活消费指南",
						publishDate: "2025-05-04"
					},
					{
						id: 5,
						title: "【健康新宠】高蛋白低脂沙拉，吃一次就上瘾",
						summary: "鸡胸+溏心蛋+鲜蔬搭配，26g高蛋白仅160大卡，增肌减脂优选。",
						source: "健康素食资讯",
						publishDate: "2025-05-05"
					},
					{
						id: 6,
						title: "【约会神器】浪漫烛光晚餐套餐，520告白必备",
						summary: "星级大厨定制菜单，氛围灯+特调饮品，在家打造米其林约会。",
						source: "时尚生活杂志",
						publishDate: "2025-05-06"
					}
				]
			};
		},
		computed: {
			// 筛选列表
			filteredList() {
				const keyword = this.searchKeyword.trim().toLowerCase();
				if (!keyword) return this.dinnerList;

				return this.dinnerList.filter(item =>
					item.title.toLowerCase().includes(keyword) ||
					item.summary.toLowerCase().includes(keyword) ||
					item.source.toLowerCase().includes(keyword)
				);
			}
		},
		methods: {
			// 搜索处理
			handleSearch() {
				this.searchKeyword = this.searchKeyword.trim();
				// 收起键盘
				uni.hideKeyboard();
			}
		}
	};
</script>

<style scoped>
	.dinner-page {
		padding: 20rpx;
		background-color: #fff8f0;
		min-height: 100vh;
	}

	/* 搜索区域样式 */
	.search-container {
		display: flex;
		align-items: center;
		gap: 15rpx;
		margin-bottom: 30rpx;
		padding: 0 10rpx;
	}

	.search-icon {
		position: absolute;
		left: 50rpx;
		z-index: 1;
	}

	.search-input {
		flex: 1;
		height: 70rpx;
		padding-left: 60rpx;
		background: #fff;
		border-radius: 35rpx;
		font-size: 28rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 122, 69, 0.1);
	}

	.search-btn {
		width: 120rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #ff7a45;
		color: #fff;
		border-radius: 35rpx;
		font-size: 28rpx;
		padding: 0;
	}

	.search-btn::after {
		border: none;
	}

	/* 列表样式 */
	.dinner-list {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.dinner-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}

	.dinner-item:hover {
		transform: translateY(-5rpx);
	}

	.dinner-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		line-height: 1.4;
	}

	.dinner-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 25rpx;
		display: block;
	}

	.dinner-info {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		color: #999;
		margin-bottom: 25rpx;
	}

	.detail-link {
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 25rpx;
		background-color: #ff7a45;
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
		text-decoration: none;
		transition: background-color 0.2s;
	}

	.detail-link:hover {
		background-color: #e66a3a;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		gap: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>